const balance = document.querySelector('#balance');
const income = document.querySelector('#income');
const pay = document.querySelector('#pay');
const list = document.querySelector('#list');
const form = document.querySelector('#form');
const text = document.querySelector('#text');
const money = document.querySelector('#money');


// json 解析 交易存储
const localStorageTransactions = JSON.parse(
    localStorage.getItem('transactions')
)

// 创建一个 交易 数组 里面存放这 json 解析的 交易 本地存储
let transactions = localStorage.getItem('transactions') !== null ? localStorageTransactions : [];

// 添加交易
function addTransaction(e) {
    e.preventDefault();
    // 对添加事件进行判断
    if (text.value.trim() === '' || money.value.trim() === '') {
        alert('请输入交易说明和交易金额');
    } else {
        // 存储交易金额  里面包含id 交易说明  金额
        const transaction = {
            id: generateID(),
            text: text.value,
            money: +money.value
        };
        // 将所有的交易放入一个数组里面
        transactions.push(transaction);

        // 将存储的交易 渲染给 dom 显示出来
        addTransactionDOM(transaction);
        
        // 刷新一次 余额和收入 费用的值
        updateValues();

        // 刷新本地存储
        updateLocalStorage();

        // 交易完成之后 清空 input
        text.value = '';
        money.value = '';
    }
}

// 给每个交易生成一个id
function generateID() {
    return Math.floor(Math.random() * 1000000);
}

// 交易渲染
function addTransactionDOM(transaction) {
    // 对交易的金钱进行判断  正负  sign正负号
    const sign = transaction.money < 0 ? '-' : '+';
    
    // 有交易之后 渲染出一个 li
    const item = document.createElement('li');
    // 给 li  添加类名 如果是 - minus   + plus  通过判断 交易金钱的 正负 来添加
    item.classList.add(transaction.money < 0 ? 'minus' : 'plus');

    // 给 li 里面添加  交易说明 正负号 交易金额  删除按钮 给删除按钮添加一个点击事件 通过 id 删除
    item.innerHTML = `
        ${transaction.text}<span>${sign}${Math.abs(transaction.money)}</span><button class="delete-btn" onclick="removeTransaction(${transaction.id})">x</button>
    `;
    list.appendChild(item);
}


// 刷新 收入 支出 余额
function updateValues() {
    // 筛选 交易金钱 
    const moneys = transactions.map(transaction => transaction.money);
    // 对交易金钱的 累加 reduce  保留两位小数 toFixed(2)
    const total = moneys.reduce((acc, item) => (acc += item), 0).toFixed(2);
 
    // 对收入进行总合   filter筛选符合条件的 返回新数组 进行累加 保留两位小数
    const incomes = moneys
    .filter(item => item > 0)
    .reduce((acc, item) => (acc += item), 0)
    .toFixed(2);

    // 对支出进行总合
    const pays = (moneys
        .filter(item => item < 0)
        .reduce((acc, item) => (acc += item), 0) * -1)
        .toFixed(2);
    // 对余额 收入 支出 进行数据渲染
    balance.innerHTML = `$${total}`;
    income.innerHTML = `$${incomes}`;
    pay.innerHTML = `$${pays}`;
}

// 对删除按钮进行 id 的获取
function removeTransaction(id) {
    // 剔除 无效的 id 保留有效的
    transactions = transactions.filter(transaction => transaction.id !== id);
    // 刷新本地存储
    updateLocalStorage();
    init()
}

// 刷新本地存储 并且用json转换为字符串存储
function updateLocalStorage() {
    localStorage.setItem('transactions', JSON.stringify(transactions))
}

// 初始化 app
function init() {
    list.innerHTML = '';
    // 交易数组对每次 交易 进行遍历
    transactions.forEach(addTransactionDOM);
    updateValues();
}

init();

// form 点击添加之后 添加 一条交易数据
form.addEventListener('submit', addTransaction)